<template>
  <div class="box">
    <div class="list" v-if="list.length > 0">
      <div class="item" v-for="item in list" :key="item._id">
        <a-card hoverable class="card">
          <template #cover>
            <div class="img">
              <img alt="example" :src="item.coverImg" />
              <div class="cover">
                <a-button type="primary" @click="goDetail(item._id)"
                  >使用该模板创建</a-button
                >
              </div>
            </div>
          </template>
          <a-card-meta :title="item.title">
            <template #description>
              <div class="descriptions">
                <div class="left">
                  <span>作者:{{ item.author }}</span>
                </div>
                <div class="right">
                  <UserOutlined />
                  <span style="margin-left: 5px; font-weight: 700">{{
                    item.copiedCount
                  }}</span>
                </div>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </div>
      <div class="load-more-btn">
        <a-button
          type="primary"
          size="large"
          shape="round"
          :loading="loading"
          @click="loadMoreHandel"
          v-if="isLoadMore"
          >加载更多</a-button
        >
      </div>
    </div>
    <a-empty v-else>
      <template #description>
        <span> 还没有作品，快去创建吧！ </span>
      </template>
      <a-button type="primary" @click="createWorkHandle"
        >创建我的第一个作品</a-button
      >
    </a-empty>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'TemplateList',
})
import { ref, onMounted, watch } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import type { TemplateItem } from './type'
import { useRouter } from 'vue-router'
import useTemplateStore from '@/store/modules/templateStore'
import useLoadMore from '@/hooks/useLoadMore'
import { createWorkAPI } from '@/request/modules/work'
const list = ref<TemplateItem[]>([])
const router = useRouter()
const templateStore = useTemplateStore()
const loading = ref(false)
const { loadMore, isLoadMore } = useLoadMore('templateList', {
  pageIndex: 0,
  pageSize: 8,
})
onMounted(() => {
  loadMore()
})
watch(
  () => templateStore.templatesList,
  (newValue) => {
    list.value = newValue
  }
)
list.value = templateStore.templatesList
const goDetail = (id: number | string) => {
  router.push({
    name: 'template',
    params: {
      id,
    },
  })
}
const loadMoreHandel = async () => {
  loading.value = true
  try {
    await loadMore()
  } catch (error) {
  } finally {
    loading.value = false
  }
}
const createWorkHandle = async () => {
  const result = await createWorkAPI()
  const { _id } = result.data?.data || {}
  if (_id) {
    router.push({
      name: 'editor',
      params: {
        id: _id,
      },
    })
  }
}
</script>

<style scoped lang="scss">
.box {
  .list {
    display: flex;
    width: 1200px;
    flex-wrap: wrap;

    margin: 0 auto;
    .item {
      margin: 10px;
      width: 280px;

      .card {
        width: 280px;
        :deep(.ant-card-body) {
          padding: 20px;
        }
        .img {
          width: 100%;
          height: 380px;
          position: relative;
          overflow: hidden;
          border-radius: 8px 8px 0 0;
          img {
            width: 100%;

            transition: all 0.3s ease-in-out;
          }
          .cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease-in-out;
            button {
              border-radius: 20px;
            }
          }
          &:hover {
            .cover {
              opacity: 1;
            }
            img {
              transform: scale(1.2);
            }
          }
        }
        .descriptions {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .load-more-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
